<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:f="http://java.sun.com/jsf/core" xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:p="http://primefaces.org/ui">
<ui:composition>
	<div class="col-sm-10">
    <h2>#{text['aulaList.heading']}</h2>
	
	<h:form id="searchForm" styleClass="well" autocomplete="off" rendered="#{aulaAction.admin}">
		<div class="form-group">
			<h:outputLabel styleClass="control-label" for="centro" value="#{text['aulaList.centro']}"/>
			<h:selectOneMenu value="#{aulaAction.idCentro}" id="centro" styleClass="form-control" style="height: 38px"
				filter="true" filterMatchMode="startsWith" effect="fade">
				<f:selectItem itemLabel="#{text['aulaList.centros']}" itemValue="" />  
				<f:selectItems value="#{centroAction.centrosList}" var="centro" itemLabel="#{centro.nombre} - #{centro.nombreComercial}" itemValue="#{centro.id}"/>
			</h:selectOneMenu>
			<p:message for="centro"/>
		</div>
		<h:commandButton styleClass="btn btn-default btn-sm" value="#{text['button.update']}"/>
	</h:form>
	        
	<h:form id="aulaList">
		<div id="actions" class="btn-group">
			<!-- <script> shows up here and causes square corners on the Add button below -->
	    	<h:commandButton actionListener="#{aulaAction.add}" value="#{text['button.add']}" id="add" styleClass="btn btn-primary"/>
	    	<h:commandButton value="#{text['button.done']}" action="home" id="cancel" immediate="true" styleClass="btn btn-default"/>
		</div>
	
		<p:dataTable id="aulas" var="aula" value="#{aulaAction.aulas}" sortBy="#{aulaAction.sortColumn}"
	             paginator="true" rows="25"
	             paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
	             rowsPerPageTemplate="5,10,15">
	    	<p:column rendered="#{aulaAction.admin}">
	        	<f:facet name="header">
	                <h:outputText value="Nombre Centro"/>
	        	</f:facet>
	        	<h:commandLink action="#{aulaAction.edit(aula)}" value="#{aula.centro.nombre}"/>
	    	</p:column>
	    	<p:column>
	        	<f:facet name="header">
	            	<p:column sortBy="nombre">
	                	<h:outputText value="#{text['aula.nombre']}"/>
	            	</p:column>
	        	</f:facet>
	        	<h:commandLink action="#{aulaAction.edit(aula)}" value="#{aula.nombre}"/>
	    	</p:column>
	    	<p:column>
	        	<f:facet name="header">
	            	<p:column sortBy="ubicacion">
	                	<h:outputText value="#{text['aula.ubicacion']}"/>
	            	</p:column>
	        	</f:facet>
	        	<h:outputText value="#{aula.ubicacion}"/>
	    	</p:column>
	    	<p:column>
	        	<f:facet name="header">
	         		<h:outputText value="#{text['aula.educadoras']}"/>
	        	</f:facet>
	        	<p:dataList value="#{aula.educadorasAsList}" var="educadora" itemType="none"
	        		emptyMessage="" styleClass="no-border">#{educadora.nombreCompleto}</p:dataList>
	    	</p:column>
		</p:dataTable>
	</h:form>
	</div>
</ui:composition>
</html>
